<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center setUp_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub setUp_fd0_0'>
				<view class='flex flex-wrap align-center setUp_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  setUp_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-center'>
					<text class='setUp_fd0_0_c1_c0'>设置</text>
				</view>
				<view class='flex flex-wrap align-center justify-end setUp_fd0_0_c0'>
					<text class='setUp_fd0_0_c2_c0' @tap.stop="upFriendsRemark">确定</text>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!---基本设置flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch setUp_flex_1">
			<view class='flex flex-direction flex-wrap align-stretch setUp_fd1_0'>
				<view class='flex flex-wrap align-center justify-between setUp_fd1_0_c0'>
					<text class='setUp_fd1_0_c0_c0'>设置备注</text>
					<input class='setUp_fd1_0_c0_c1' type="text" placeholder="输入您要修改的备注" confirm-type="done"
						:maxlength="10" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="fd1_0_c0_c1" />
				</view>
				<view class='flex flex-wrap align-center justify-between setUp_fd1_0_c0'>
					<text class='setUp_fd1_0_c0_c0'>关注</text>
					<u-switch v-model="checked" size="34" inactive-color="#eee" active-color="#6A0002" @change="getFollow"></u-switch>
				</view>
				<view class='flex flex-wrap align-center justify-between setUp_fd1_0_c0'
					@tap.stop="openBlock">
					<text class='setUp_fd1_0_c0_c0'>拉黑</text>
				</view>
				<view class='flex flex-wrap align-center justify-between setUp_fd1_0_c0' @tap.stop="openReport">
					<text class='setUp_fd1_0_c0_c0'>举报</text>
				</view>
			</view>
		</view>

		<!---基本设置flex布局结束-->
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex setUp_flex_2">
			<button class='setUp_fd2_0' @tap.stop="delInfo">清空聊天记录</button>
		</view>
		<view :style="{height: '88rpx'}"></view>
		<benben-popup v-model="popupShow1683681243999" :mask="true" mode='bottom'>
			<!---男对女举报flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout setUp_flex_3">
				<view class='flex flex-wrap align-center justify-between setUp_fd3_0'>
					<view class='flex flex-wrap align-center setUp_fd3_0_c0'>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='setUp_fd3_0_c1_c0'>举报用户</text>
					</view>
					<view class='flex flex-wrap align-center justify-end setUp_fd3_0_c2'
						@tap.stop="closeReport">
						<image class='setUp_fd3_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"34.png"'></image>
					</view>
				</view>
				<benben-select-diy ref="showSelectPopup1683681482940"
					class-name='flex flex-direction align-stretch flex' :items.sync="reportType" v-model="report_id"
					default-type="id" default-label="name" :allow-cancel='false' type="radio" :disabled='false'>
					<template v-for='(item,key0) in reportType'>
						<view v-if="item.isSelected" class='flex align-center justify-between flex setUp_fd3_1_c0'
							:key="key0" @tap="$refs.showSelectPopup1683681482940.tapHandle(key0)">
							<text>{{item.name}}</text>
							<image class='setUp_fd3_1_c0_c1' mode="aspectFit" :src='STATIC_URL+"35.png"'></image>
						</view>
						<view v-else class='flex flex setUp_fd3_1_c0' :key="key0"
							@tap="$refs.showSelectPopup1683681482940.tapHandle(key0)">
							<text>{{item.name}}</text>
						</view>
					</template></benben-select-diy>
				<view class='flex flex-wrap align-center setUp_fd3_2'>
					<view class='flex flex-wrap setUp_fd3_2_c0'>
						<textarea class='flex setUp_input_fd3_2_c0' confirm-type="done" :placeholder="'请输入举报内容'"
							:maxlength="100" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
							v-model="fd3_2_c0" />
					</view>
				</view>
				<view class='flex flex-wrap align-center setUp_fd3_3'>
					<button class='flex-sub setUp_fd3_3_c0' @tap.stop="submitReport">提交</button>
				</view>
			</view>
			<!---男对女举报flex布局结束-->
		</benben-popup>
		<u-modal v-model="show" :content="content" :show-cancel-button="true" confirm-color="#6A0002" @confirm="confirm"></u-modal>

	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				"checked": false,
				"show": false,
				"content": "",  // 拉黑提示语
				"fd3_2_c0": "",
				"popupShow1683681243999": false,
				"fd1_0_c0_c1": "",
				"selectedId": "1",
				"reportType": [{
					"name": "我",
					"value": "1",
					"image": ""
				}, {
					"name": "你",
					"value": "2",
					"image": ""
				}],
				"report_id": "",
				"arr": [{
					"name": "www",
					"value": "1",
					"image": ""
				}, {
					"name": "而噩噩",
					"value": "2",
					"image": ""
				}],
				"id": "", // 被评价人id
				"authInfos": {
					"images": [],
				},
				"type": 1, // 1对女的举报  2对男的举报
				"toUserId": "",  // IMid
				"isBlack": 0, // 是否加入黑名单  0否  1把对方加入黑名单  2对方把自己加入黑名单
				"conversationActive": null,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				toUserId,
				isBlack
			} = options
			if (id !== undefined) this.id = id
			if (toUserId !== undefined) this.toUserId = toUserId
			if (isBlack !== undefined) this.isBlack = isBlack
			this.getReportType();
			if (this.isBlack == 0) {
				this.getFriendsInfo();
			}
			this.conversationActive = this.$store.state.conversationActive;
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getAuthInfo();
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//删除聊天记录
			delInfo() {
				let _this = this;
				let promise = _this.tim.deleteConversation(_this.conversationActive.conversationID);
				promise.then(imResponse => {
					uni.$emit('delNews');
					_this.$message.info('清除成功');
				}).catch(imError => {
					console.log('deleteConversation error:', imError); // 删除会话失败的相关信息
					_this.$message.info('清除失败，请重试');
				});
			},
			// 获取好友的全量数据
			getFriendsInfo() {
				let _this = this;
				let promise = _this.tim.getFriendProfile({
				  userIDList: [_this.toUserId]
				});
				promise.then(function(imResponse) {
				  const { friendList, failureUserIDList } = imResponse.data;
				  friendList.forEach((friend) => {
					  // console.log(friend);
				    // Friend 对象
					if (friend.remark) {
						_this.fd1_0_c0_c1 = friend.remark;
					}
				  });
				  // 失败的 userIDList
				  failureUserIDList.forEach((item) => {
				    const { userID, code, message } = item;
				  });
				}).catch(function(imError) {
				  console.warn('getFriendProfile error:', imError); // 获取失败
				});
			},
			// 更新好友备注
			upFriendsRemark() {
				let _this = this;
				// if (!_this.fd1_0_c0_c1) {
				// 	_this.$message.info('请输入备注');
				// 	return;
				// }
				if (_this.isBlack == 1) {
					_this.$message.info('此用户已加入黑名单，无法设置备注');
					return;
				}
				if (_this.isBlack == 2) {
					_this.$message.info('对方已把你加入黑名单，无法设置备注');
					return;
				}
				let promise = _this.tim.updateFriend({
				  userID: _this.toUserId,
				  remark: (_this.fd1_0_c0_c1).trim()
				});
				promise.then(function(imResponse) {
				  // console.log(imResponse.data); // Friend 实例
				  _this.$message.info('设置成功');
				  _this.getFriendsInfo();
				  uni.$emit('getRemark');
				}).catch(function(imError) {
				  console.warn('getFriendProfile error:', imError); // 更新失败
				});
			},
			
			//获取对方人用户详情
			getAuthInfo() {
				this.$api.post(global.API_VERSION + '/64366f0e3b620', {
					user_id: this.id
				}).then(res => {
					if (res.data.code == 1) {
						this.authInfos = res.data.data;
						if (this.authInfos.sex == 1) {
							this.type = 2;
						} else {
							this.type = 1;
						}
						if (this.authInfos.is_follow == 1) {
							this.checked = true;
						} else {
							this.checked = false;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 获取举报类型  
			getReportType() {
				this.$api.post(global.API_VERSION + '/6476ef736d2ac', {
					type: this.type
				}).then(res => {
					if (res.data.code == 1) {
						this.reportType = res.data.data;
						if (this.reportType.length > 0) {
							this.report_id = this.reportType[0].id;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 提交举报
			submitReport() {
				if (!this.fd3_2_c0) {
					this.$message.info('请填写举报内容');
					return;
				}
				this.popupShow1683681243999 = false;
				this.$api.post(global.API_VERSION + '/6476ef8a811ee', {
					type: this.type,
					type_id: this.report_id,
					other_id: this.id,
					content: this.fd3_2_c0
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.fd3_2_c0 = '';
						this.report_id = this.reportType[0].id;
					}
				})
			},
			// 关注  647322fb760b6
			getFollow() {
				this.$api.post(global.API_VERSION + '/647322fb760b6', {
					user_id: this.id
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1 || res.data.code == 2) {
						this.getAuthInfo();
					}
				})
			},
			openReport() {
				this.popupShow1683681243999 = true;
			},
			closeReport() {
				this.fd3_2_c0 = '';
				this.popupShow1683681243999 = false;
			},
			// 拉黑
			openBlock() {
				this.content = '确认拉黑' + this.authInfos.user_nickname + '吗？';
				this.show = true;
			},
			confirm() {
				this.$api.post(global.API_VERSION + '/6476ef9c082b2', {
					other_id: this.id
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						let promise = this.tim.addToBlacklist({userIDList: [this.toUserId]}); // 请注意：即使只添加一个用户帐号到黑名单，也需要用数组类型，例如：userIDList: ['user1']
						promise.then(function(imResponse) {
						  console.log(imResponse.data); // 被拉黑的全量账号列表，结构为包含用户 userID 的数组 - [userID]
						}).catch(function(imError) {
						  console.warn('addToBlacklist error:', imError); // 添加用户到黑名单列表失败的相关信息
						});
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(246, 247, 249, 1);
		background-size: 100% auto !important;
	}

	.setUp_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.setUp_fd0_0_c2_c0 {
		line-height: 35rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
	}

	.setUp_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.setUp_fd0_0_c0_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 36rpx;
	}

	.setUp_fd0_0_c0 {
		width: 150rpx;
	}

	.setUp_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.setUp_flex_1 {
		background: #fff;
		font-size: 32rpx;
		background-size: 100% auto !important;
	}

	.setUp_fd1_0_c0_c1 {
		text-align: right;
	}

	.setUp_fd1_0_c0_c0 {
		font-size: 32rpx;
	}

	.setUp_fd1_0_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.setUp_fd1_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.setUp_flex_2 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(48rpx + var(--window-bottom));
	}

	.setUp_fd2_0 {
		background: #6A0002;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 638rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.setUp_flex_3 {
		background: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.setUp_fd3_3_c0 {
		background: #6A0002;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		height: 88rpx;
		box-shadow: 0rpx 6rpx 20rpx rgba(19, 163, 141, 0.3);
		line-height: 88rpx;
		width: 638rpx;
	}

	.setUp_fd3_3 {
		margin: 64rpx 0rpx 48rpx 0rpx;
	}

	.setUp_input_fd3_2_c0 {
		width: 100%;
		height: 140rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.setUp_fd3_2_c0 {
		background: #F8F8F8;
		width: 691rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx 24rpx 24rpx 24rpx;
		height: 240rpx;
		color: var(--benbenFontColor0);
		font-size: 28rpx;
	}

	.setUp_fd3_2 {
		margin: 4rpx 0rpx 0rpx 0rpx;
	}

	.setUp_fd3_1_c0_c1 {
		width: 24rpx;
		height: 18rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.setUp_fd3_1_c0 {
		padding: 28rpx 0rpx 28rpx 0rpx;
	}

	.setUp_fd3_0_c2_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.setUp_fd3_0_c2 {
		width: 200rpx;
	}

	.setUp_fd3_0_c1_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.setUp_fd3_0_c0 {
		width: 200rpx;
		height: 10rpx;
	}

	.setUp_fd3_0 {
		padding: 32rpx 0rpx 28rpx 0rpx;
	}

	.setUp_flex_4 {
		background: #fff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		padding: 0rpx 32rpx 32rpx 32rpx;
	}

	.setUp_fd4_1_c0_c1 {
		width: 24rpx;
		height: 18rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.setUp_fd4_1_c0 {
		padding: 28rpx 0rpx 28rpx 0rpx;
	}

	.setUp_fd4_0_c2_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.setUp_fd4_0_c2 {
		width: 200rpx;
	}

	.setUp_fd4_0_c1_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.setUp_fd4_0_c0 {
		width: 200rpx;
		height: 10rpx;
	}

	.setUp_fd4_0 {
		padding: 32rpx 0rpx 28rpx 0rpx;
	}
</style>